<template>
  <div class="content">
    <div class="info-content">
      <div class="title">修改密码</div>
      <div class="form-block">
        <div class="form-info">
          <div class="title">密码</div>
          <div class="form-item">
            <input v-model="form.password" class="form-ctrl phone" maxlength="11" type="text" placeholder="请输入您的密码"/>
          </div>
        </div>
        <div class="form-info">
          <div class="title">确认密码</div>
          <div class="form-item">
            <input v-model="form.code" class="form-ctrl phone" maxlength="11" type="text" placeholder="请确认您的密码"/>
          </div>
        </div>
      </div>
      <div class="btn-item">
        <div class="btn" @click="confirm">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import {validate} from "@/utils/validate";

export default {
  name: "password",
  data(){
    return{
      form:{
        code:'',
        password:''
      },
      rules: {
        password: {
          name: '密码',
          required: true,
          validator: function (value, form, callback) {
            if (value.length < 6) {
              callback('密码不能小于6位');
            }
            callback();
          }
        }
      },
    }
  },
  methods: {
    confirm(){
      if(validate(this.form,this.rules)){
        this.formLoading=true;
        this.$router.replace({path:"/mine-center/change-password/password"});
      }
    }
  }

}
</script>

<style scoped lang="scss">
.content{
  width: $contentWidth;
  min-height: $fullMinHeight;
  background: #fff;
  margin: 0 auto;

  .info-content{
    min-height: $minHeight;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title{
      margin-top: 60px;
      font-size: 22px;
    }
    .form-block{

      .form-info{
        display: flex;
        align-items: center;
        .title{
          width: 80px;
          margin-top: 30px;
          font-size: 16px;
          display: flex;
          justify-content: flex-end;
          margin-right: 20px;
        }
        .form-item {
          margin-top: 30px;
          width: 310px;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-radius: 30px;
          background: $lightGray;

          .form-ctrl {
            width: 100%;
            height: 40px;
            padding: 0 20px;
            background: none;
          }

          .form-ctrl.code {
            width: calc(100% - 90px);
          }

          .get-code {
            width: 100px;
            font-size: 13px;
            color: $orange;
            border-left: 1px solid $midGray;
            padding-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
    .btn-item {
      display: flex;
      justify-content: center;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
        height: 35px;
        width: 140px;
        border-radius: 30px;
        margin-left: 20px;
        background-color: $orange;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>